<template>
  <div class="meal">
    <Headbar />
    <HeadTitle title="VIP服务" />

    <div class="yh-layout-box">
      <div class="set-step">
        <div class="yh-steps">
          <div :class="index == stepActive?'step-item step-active':'step-item'" v-for="(i, index) in stepList">
            <span class="step-number">{{ index+1 }}</span>
            <span class="step-text">{{ i }}</span>
          </div>
        </div>
      </div>

      <div class="meal-list">
        <div :class="index == mealActive?'meal-item meal-active':'meal-item'" v-for="(i, index) in mealList" @click="clickMeal(index)">
          <div class="meal-icon">
            <img :src="i.icon">
          </div>
          <div class="meal-name">
            {{ i.name }}
          </div>
          <div class="meal-money">
            {{ i.money }}
          </div>
          <div class="meal-tips">
            {{ i.tips }}
          </div>
        </div>
      </div>
    </div>
    <Footbar />
  </div>
</template>

<script>
import Headbar from '@/components/Layouts/Headbar.vue'
import HeadTitle from '@/components/Layouts/HeadTitle.vue'
import Footbar from '@/components/Layouts/Footbar.vue'
export default {
  name: 'Meal',
  components: {
    Headbar,
    HeadTitle,
    Footbar,
  },
  data() {
    return {
      stepList: ['选择服务', '支付费用', '客服联系开通', '开通成功'],
      stepActive: 1,
      mealList: [{
        icon: require('@/assets/images/meal/meal-01.png'),
        name: '基础版',
        money: '8,800元/年',
        tips: '千万中小企业的选择开启电商之路',
      },{
        icon: require('@/assets/images/meal/meal-02.png'),
        name: '特权黄金店',
        money: '28,800元/年',
        tips: '优先享有价值5万元推广大礼包',
      },{
        icon: require('@/assets/images/meal/meal-03.png'),
        name: '特权白金店',
        money: '38,800元/终身',
        tips: '优先享有价值10万元推广大礼包',
      },{
        icon: require('@/assets/images/meal/meal-04.png'),
        name: '特权至尊店',
        money: '58,800元/终身',
        tips: '优先享有价值20万元推广大礼包',
      }],
      mealActive: 0,
    }
  },
  created() {

  },
  methods: {
    clickMeal(index) {
      this.mealActive = index;
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/pages/meal.scss';

</style>
